<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七星追剧</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/routes.css">
    <!-- 版本配置 -->
    <script src="../config/version.js"></script>
    <!-- 更新日志配置 -->
    <script src="../config/changelog.js"></script>
</head>

<body>
    <div id="app">
        <!-- 自定义标题栏 -->
        <div class="custom-titlebar">
            <div class="titlebar-drag-region">
                <img src="../../assets/icon.png" alt="七星追剧" class="titlebar-icon">
                <span class="titlebar-title">七星追剧</span>
            </div>
            <div class="titlebar-controls">
                <button class="titlebar-button minimize-btn" id="minimize-btn" title="最小化">
                    <svg width="12" height="12" viewBox="0 0 12 12">
                        <path d="M0 6h12" stroke="currentColor" stroke-width="1" />
                    </svg>
                </button>
                <button class="titlebar-button maximize-btn" id="maximize-btn" title="最大化/还原">
                    <svg width="12" height="12" viewBox="0 0 12 12">
                        <path d="M1 1h10v10H1z" fill="none" stroke="currentColor" stroke-width="1" />
                    </svg>
                </button>
                <button class="titlebar-button close-btn" id="close-btn" title="关闭">
                    <svg width="12" height="12" viewBox="0 0 12 12">
                        <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- 应用主内容区 -->
        <div class="app-content">
            <!-- 侧边栏导航 -->
            <nav class="sidebar">
                <div class="sidebar-header">
                    <div class="logo-container">
                        <img src="logo.png" alt="七星追剧" class="logo">
                        <div class="version-info" id="version-info">v1.2.4</div>
                    </div>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item active">
                        <a href="#" data-page="home">
                            <i class="icon-home"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" data-page="history">
                            <i class="icon-history"></i>
                            <span>播放历史</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" data-page="settings">
                            <i class="icon-settings"></i>
                            <span>设置</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" data-page="about">
                            <i class="icon-about"></i>
                            <span>关于</span>
                        </a>
                    </li>
                </ul>

                <!-- 更新检查功能 -->
                <div class="sidebar-update-section">
                    <div class="update-checker">
                        <button id="check-update-btn" class="check-update-btn">
                            <i class="icon-update"></i>
                            <span>检查更新</span>
                        </button>
                        <div class="update-status" id="update-status" style="display: none;">
                            <div class="update-message" id="update-message"></div>
                            <button id="download-update-btn" class="download-update-btn" style="display: none;">
                                下载最新版
                            </button>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="main-content">
                <!-- 首页内容 -->
                <div id="home-page" class="page active">
                    <!-- 固定搜索栏 -->
                    <div class="fixed-search-header">
                        <div class="search-section">
                            <div class="site-selector">
                                <select id="site-select">
                                    <option value="qxyys">七星追剧</option>
                                </select>
                            </div>
                            <div class="category-filter">
                                <select id="category-select">
                                    <option value="">全部分类</option>
                                </select>
                            </div>
                            <div class="search-box">
                                <input type="text" id="search-input" placeholder="搜索影片名称...">
                                <button id="search-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <!-- 滚动内容区域 -->
                    <div class="scrollable-content">
                        <div id="loading" class="loading hidden">加载中...</div>
                        <div id="video-grid" class="video-grid"></div>
                        <div id="pagination" class="pagination"></div>
                    </div>
                </div>

                <!-- 详情页面 -->
                <div id="detail-page" class="page">
                    <div class="page-content">
                        <div class="detail-header">
                            <button id="back-btn" class="back-btn">← 返回</button>
                            <h2 id="detail-title">影片详情</h2>
                        </div>
                        <div id="detail-content" class="detail-content"></div>
                    </div>
                </div>

                <!-- 播放历史页面 -->
                <div id="history-page" class="page">
                    <div class="page-content">
                        <div class="page-header">
                            <h2>播放历史</h2>
                            <button id="clear-history-btn" class="btn-secondary">清空历史</button>
                        </div>
                        <div id="history-list" class="history-list"></div>
                    </div>
                </div>

                <!-- 设置页面 -->
                <div id="settings-page" class="page">
                    <div class="page-content">
                        <div class="page-header">
                            <h2>设置</h2>
                        </div>
                        <div class="settings-content">
                            <div class="settings-section">
                                <h3>数据管理</h3>
                                <p class="settings-description">导入导出所有设置数据，包括站点配置、线路别名等</p>
                                <div class="data-management-actions">
                                    <button id="export-data-btn" class="btn-primary">导出配置</button>
                                    <button id="import-data-btn" class="btn-secondary">导入配置</button>
                                    <input type="file" id="import-file-input" accept=".json" style="display: none;">
                                </div>
                            </div>

                            <div class="settings-section">
                                <h3>站点管理</h3>
                                <div class="site-list" id="site-list"></div>
                                <button id="add-site-btn" class="btn-primary">添加站点</button>
                            </div>

                            <div class="settings-section">
                                <h3>线路设置</h3>
                                <p class="settings-description">为播放线路设置自定义别名，让线路名称更易理解</p>
                                <div class="route-aliases-list" id="route-aliases-list"></div>
                                <button id="manage-routes-btn" class="btn-primary">管理线路别名</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关于页面 -->
                <div id="about-page" class="page">
                    <div class="page-content">
                        <div class="page-header">
                            <h2>关于</h2>
                        </div>
                        <div class="about-content">
                            <div class="about-hero">
                                <img src="logo.png" alt="七星追剧" class="about-logo">
                                <div class="about-info">
                                    <h1>七星追剧</h1>
                                    <p class="version">版本 <span id="about-version">v1.2.4</span></p>
                                    <p class="description">基于 Electron 的桌面影视播放应用</p>
                                </div>
                            </div>

                            <div class="about-section">
                                <h3>软件简介</h3>
                                <p>七星追剧是一款现代化的桌面影视播放应用，专为播放苹果CMS资源站的影视节目而设计。采用 Electron
                                    框架开发，支持多站点管理、智能线路过滤、实时弹幕互动、窗口置顶、投屏播放等功能，为用户提供优质的观影体验。</p>

                                <div class="feature-grid">
                                    <div class="feature-item">
                                        <h4>🎬 多站点支持</h4>
                                        <p>支持多个苹果CMS API站点，兼容JSON/XML格式</p>
                                    </div>
                                    <div class="feature-item">
                                        <h4>🎭 弹幕互动</h4>
                                        <p>实时弹幕系统，支持多彩弹幕样式和智能房间分配</p>
                                    </div>
                                    <div class="feature-item">
                                        <h4>📱 现代UI</h4>
                                        <p>半透明亚克力效果，WIN11风格圆角设计</p>
                                    </div>
                                    <div class="feature-item">
                                        <h4>⚙️ 智能管理</h4>
                                        <p>线路屏蔽、别名设置、配置导入导出</p>
                                    </div>
                                    <div class="feature-item">
                                        <h4>📌 窗口置顶</h4>
                                        <p>播放器窗口置顶功能，保持始终在最前面</p>
                                    </div>
                                    <div class="feature-item">
                                        <h4>📺 投屏播放</h4>
                                        <p>支持将视频投屏到电视等大屏设备</p>
                                    </div>
                                </div>
                            </div>

                            <div class="about-section">
                                <h3>作者信息</h3>
                                <div class="author-info">
                                    <div class="author-item">
                                        <span class="label">开发者：</span>
                                        <span class="value">止水</span>
                                    </div>
                                    <div class="author-item">
                                        <span class="label">许可证：</span>
                                        <span class="value">MIT License</span>
                                    </div>
                                    <div class="author-item">
                                        <span class="label">技术栈：</span>
                                        <span class="value">Electron + HLS.js + WebSocket</span>
                                    </div>
                                </div>
                            </div>

                            <div class="about-footer">
                                <p>感谢您使用七星追剧！如果您喜欢这个应用，请给我们一个⭐Star支持！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div> <!-- 关闭 app-content -->
    </div> <!-- 关闭 app -->

    <!-- 模态框 -->
    <div id="modal" class="modal hidden">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modal-body"></div>
        </div>
    </div>

    <script src="js/api.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/components.js"></script>
    <script src="js/app.js"></script>
</body>

</html>